<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">附近店铺</h3>
    <el-form :model="nearShopForm" class="label-black" ref="nearShopForm" label-width="76px" :show-message="false">
      <div class="set-part mt20">
        <el-form-item label="添加标题" prop="showTitle">
          <div class="flex">
            <div class="val-show flex-1">{{nearShopForm.showTitle?'显示':'不显示'}}</div>
            <el-checkbox v-model="nearShopForm.showTitle"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item v-if="nearShopForm.showTitle" label-width="0" prop="title">
          <el-input v-model="nearShopForm.title" placeholder="请输入标题内容"></el-input>
        </el-form-item>
        <el-form-item class="show-num-row" label-width="0" prop="limitNum" required>
          显示个数<el-input v-model.number="nearShopForm.limitNum" :min="1" :max="30"></el-input><span class="unit-tip">家</span><span class="small-tip">不超过30家</span>
        </el-form-item>
        <el-form-item label="门店分类" prop="showType">
          <div class="flex">
            <div class="val-show flex-1">{{nearShopForm.showType?'显示':'不显示'}}</div>
            <el-checkbox v-model="nearShopForm.showType"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item
          v-if="nearShopForm.showType"
          label-width="0"
          prop="shop_tag"
          :rules="{ required: true, message: '请选择门店分类' ,trigger: 'change' }">
          <el-select v-model="nearShopForm.shop_tag">
            <el-option
              v-for="(item, index) in shopTagOptions"
              :label="item.tag_name"
              :value="item.mark"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
  </div>
</template>

<script>
  import mixin from '../../mixin';
  import * as API_Shop from '@/api/shop'
  export default {
    name: 'EnNearShopPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    mounted() {
      this.GET_shopTags()
    },
    data() {
      return {
        visible: this.show,
        nearShopForm: {
          showTitle: false,
          title: '',
          limitNum: 3,
          showType: false,
          shop_tag: undefined
        },
        loading: false,
        shopTagOptions: []
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        this.$nextTick(() => {
          let _showData = this.MixinClone(newVal);
          this.nearShopForm = {
            ..._showData
          };
        });
      }
    },
    methods: {
      /*
        * @date 2020-02-26
        * @author wolfMan
        * @description {获取店铺分类标签}
      */
      GET_shopTags() {
        this.loading = true
        API_Shop.getShopTags(this.params).then(response => {
          this.loading = false
          this.shopTagOptions = response
        }).catch(() => { this.loading = false })
      },
      /*
        * @date 2020-02-20
        * @author wolfMan
        * @description {表单提交}
      */
      handleConfirm() {
        this.$refs['nearShopForm'].validate((valid) => {
          if (valid) {
            const _formValue = this.nearShopForm;
            this.$emit('confirm', _formValue);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.set-box {
  .mt20 {
    margin-top: 20px !important;
  }
  .el-select {
    display: block;
  }
  /deep/ .show-num-row {
    color: #999;
    .el-input {
      margin-left: 10px;
      width: 80px;
    }
    .unit-tip {
      margin-left: 5px;
      color: #333;
    }
    .small-tip {
      margin-left: 10px;
      font-size: 12px;
    }
  }
}
</style>
